<template>
  <div>
    <div style="height: 70px;width: 100%;background: #aeb3c5;text-align: center">
      <span style="color: white;line-height: 70px;font-size: 25px">用户管理</span>
    </div>
    <!--    表格-->
    <div>
      <el-table :data="cutBean.records" style="width: 100%">
        <el-table-column prop="userName" label="用户名"/>
        <el-table-column prop="password" label="密码"/>
        <el-table-column prop="realName" label="真实姓名"/>
        <el-table-column fixed="right" label="操作" width="220">
          <template #default="scope">
            <el-button type="danger" @click="del(scope.row)">删除用户</el-button>
            <el-button type="success" @click="showUpdate(scope.row)">修改权限</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          v-model:currentPage="cutBean.current"
          v-model:page-size="cutBean.size"
          background
          layout="prev, pager, next, jumper"
          :total="cutBean.total"
          @current-change="findByItem"
          style="margin-top: 20px"
      />
    </div>

    <!--条件查询-->
    <div>
      <div style="display: flex;justify-content: space-around">
        <el-button style="margin-top: 100px" type="success" @click="this.showAdd">添加用户</el-button>
        <!--查询用户信息-->
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>查询用户信息</span>
              <el-button type="primary" @click="findByItem(1)">查询</el-button>
            </div>
          </template>
          <div class="text item">
            用户名称：
            <el-input style="margin-top: 10px" v-model="findObj.name"/>
          </div>
        </el-card>
      </div>

      <!--修改弹出框-->
      <el-dialog
          v-model="updateVisible"
          title="修改用户信息"
          width="30%"
      >
        用户名：{{ userObj.name }}<br>
        <div style="height: 10px"></div>
        真实姓名：{{ userObj.realName }}<br>
        <div style="height: 10px"></div>
        <el-form-item label="当前角色：">
          <el-checkbox v-for="role in updateObj" v-model="userRole" :label="role.id" @change="getUpdateGrade()">
            {{ role.name }}
          </el-checkbox>
        </el-form-item>
        <el-form-item label="拥有权限：">
          <span v-for="grade in userGrade" :key="grade.id" style="margin-left: 10px">{{ grade.name }}</span>
        </el-form-item>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="updateVisible = false">取消</el-button>
        <el-button type="primary" @click="update">修改</el-button>
      </span>
        </template>
      </el-dialog>
    </div>

    <!--添加信息弹出框-->
    <el-dialog
        v-model="addVisible"
        title="添加用户"
        width="30%"
    >
      用户名：<input type="text" v-model="addObj.userName" style="margin-bottom: 20px"><br>
      真实姓名：<input type="text" v-model="addObj.realName" style="margin-bottom: 20px"><br>
      <el-form-item label="当前角色：">
        <el-checkbox v-for="role in addObj" v-model="addUserRole" :label="role.id" @change="getGrade()">
          {{ role.name }}
        </el-checkbox>
      </el-form-item>
      <el-form-item label="拥有权限：">
        <span v-for="grade in addUserGrade" :key="grade.id" style="margin-left: 10px">{{ grade.name }}</span>
      </el-form-item>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="addVisible = false">取消</el-button>
        <el-button type="primary" @click="add">添加</el-button>
      </span>
      </template>
    </el-dialog>
  </div>

</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      addUserGrade: [],
      addUserRole: [],
      userRole: [],
      userObj: {},
      userGrade: [],
      roleArray: [],
      cutBean: {},
      addVisible: false,
      addObj: {},
      updateVisible: false,
      updateObj: {},
      findObj: {},
    }
  },
  methods: {
    findByItem(pageNO) {
      this.findObj.pageNO = pageNO;
      axios.get("/project/user/findByItem", {
        params: this.findObj
      }).then(resp => {
        this.cutBean = resp.data;
      });
    },
    showUpdate(obj) {
      this.updateVisible = true;
      this.userObj = obj;
      var list = new Array();
      list.push(obj);
      axios.get("/project/user/findById", {
        params: {
          userId: obj.id
        }
      }).then(resp => {
        var info = resp.data;
        info.roleSet.forEach(n => {
          this.userRole.push(n.id);
        });
        this.userGrade = info.gradeSet;
      });
      axios.get("/project/role/findAll").then(resp => {
        this.updateObj = resp.data;
      });
    },
    update() {
      axios.get("/project/user/updateRole", {
        params: {
          userId: this.userObj.id,
          roleIdArray: this.userRole.toLocaleString()
        }
      }).then(resp => {
        if (resp.data == 'ok') {
          this.findByItem(1);
          this.updateVisible = false;
        }
      });
    },
    showAdd() {
      this.addVisible = true;
      axios.get("/project/role/findAll").then(resp => {
        this.addObj = resp.data;
      });


    },
    getGrade() {
      this.addUserGrade = [];
      if (this.addUserRole == '') {
        return;
      }
      axios.get("/project/grade/findByRoleArray", {
        params: {
          roleArray: this.addUserRole.toLocaleString()
        }
      }).then(resp => {
        this.addUserGrade = resp.data;
      });

    },
    add() {
      axios.get("/project/user/add", {
        params: {
          userName: this.addObj.userName,
          realName: this.addObj.realName,
          roleIdArray: this.addUserRole.toLocaleString()
        }
      }).then(resp => {
        if (resp.data = 'ok') {
          this.findByItem(1);
          this.addVisible = false;
        }
      });
    },
    del(obj) {
      axios.get("/project/user/del", {params: {userId: obj.id}}).then(resp => {
        if (resp.data = 'ok') {
          this.findByItem(1);
        }
      });
    },
    getUpdateGrade() {
      this.userGrade = {};
      if (this.userRole == '') {
        return;
      }

      axios.get("/project/grade/findByRoleArray", {
        params: {
          roleArray: this.userRole.toLocaleString()
        }
      }).then(resp => {

        this.userGrade = resp.data;

      });


    }


  },
  created() {
    this.findByItem(1);
  }

}
</script>

<style scoped>
.card-header{
  display: flex;
  justify-content: space-between;
}
</style>